<script src="../../permission.js"></script>
<template>
  <div class="model-container">
    <div class="listName">类别管理</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="6" :md="6" :sm="8" >
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">分类名称</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="catName">
                    <el-input v-model="seacherParam.catName" size="small" placeholder="请输入分类名称" maxlenght="15"/>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button type="primary" plain @click="add">新增</el-button>
          <el-button type="danger" plain @click="del(0)">批量删除</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" :cell-class-name="cellcb" border empty-text="暂无数据" @selection-change="changeFun">

          <el-table-column align="center" type="selection" width="55"/>

          <el-table-column type="expand" >
            <template slot-scope="scope">
              <el-table v-loading="!dataOption" v-if="scope.row.children" :stripe="true" :data="scope.row.children" :show-header="false" empty-text="暂无数据" class="tableExpand" default-expand-all style="width: 95%;margin: auto">

                <el-table-column type="expand" >
                  <template slot-scope="scope">
                    <el-table v-loading="!dataOption" v-if="scope.row.children" :stripe="true" :data="scope.row.children" :show-header="false" empty-text="暂无数据" class="tableExpand">

                      <el-table-column align="center" width="55"/>

                      <el-table-column align="center" prop="catName"/>

                      <el-table-column align="center" label="是否显示">
                        <template slot-scope="scope">{{ isShowVal(scope.row.isShow) }}</template>
                      </el-table-column>

                      <el-table-column align="center" label="是否积分">
                        <template slot-scope="scope">{{ isHotSellingVal(scope.row.isHotSelling) }}</template>
                      </el-table-column>

                      <el-table-column align="center" label="是否服务处">
                        <template slot-scope="scope">{{ isWebMallCatVal(scope.row.isWebMallCat) }}</template>
                      </el-table-column>

                      <el-table-column align="center" prop="ranking" label="排序"/>

                      <el-table-column align="center" width="200px">
                        <template slot-scope="scope">

                          <!--<el-button title="添加" type="primary" circle icon="el-icon-plus"  class="table-icon" @click="edit(scope.row)"/>-->

                          <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon" @click="edit(scope.row)"/>

                          <el-button v-if="delBtn !== delID(scope.row.catId)" title="删除" type="warning" circle icon="el-icon-delete" class="table-icon" @click="del(scope.row)"/>

                        </template>

                      </el-table-column>

                    </el-table>
                  </template>
                </el-table-column>

                <el-table-column align="center" prop="catName"/>

                <el-table-column align="center" label="是否显示">
                  <template slot-scope="scope">{{ isShowVal(scope.row.isShow) }}</template>
                </el-table-column>

                <el-table-column align="center" label="是否积分">
                  <template slot-scope="scope">{{ isHotSellingVal(scope.row.isHotSelling) }}</template>
                </el-table-column>

                <el-table-column align="center" label="是否服务处">
                  <template slot-scope="scope">{{ isWebMallCatVal(scope.row.isWebMallCat) }}</template>
                </el-table-column>

                <el-table-column align="center" prop="ranking" label="排序"/>

                <el-table-column align="center" width="200px">
                  <template slot-scope="scope">

                    <!--<el-button title="添加" type="primary" circle icon="el-icon-plus"  class="table-icon" @click="edit(scope.row)"/>-->

                    <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon" @click="edit(scope.row)"/>

                    <el-button v-if="delBtn !== delID(scope.row.catId)" title="删除" type="warning" circle icon="el-icon-delete" class="table-icon" @click="del(scope.row)"/>

                  </template>
                </el-table-column>

              </el-table>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="catName" label="分类名称"/>

          <el-table-column align="center" label="是否显示">
            <template slot-scope="scope">{{ isShowVal(scope.row.isShow) }}</template>
          </el-table-column>

          <el-table-column align="center" label="是否积分">
            <template slot-scope="scope">{{ isHotSellingVal(scope.row.isHotSelling) }}</template>
          </el-table-column>

          <el-table-column align="center" label="是否服务处">
            <template slot-scope="scope">{{ isWebMallCatVal(scope.row.isWebMallCat) }}</template>
          </el-table-column>

          <el-table-column align="center" prop="ranking" label="排序"/>

          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">

              <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon" @click="edit(scope.row)"/>

              <el-button v-if="delBtn !== delID(scope.row.catId)" title="删除" type="warning" circle icon="el-icon-delete" class="table-icon" @click="del(scope.row)"/>

            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      top="2vh"
      width="40%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="分类名称" prop="catName">
            <el-input v-model="dialogBindData.catName" size="small" type="text" placeholder="请输入分类名称"/>
          </el-form-item>
          <el-form-item label="上级分类" prop="parentId" class="three">
            <el-input v-model="filterText" size="small" type="text" placeholder="过滤搜索"/>
            <el-tree
              v-if="isRouterAlive"
              ref="tree"
              :data="threeData"
              :filter-node-method="filterNode"
              :default-checked-keys="threeCheckedData"
              :default-expanded-keys="threeCheckedData"
              :props="defaultProps"
              show-checkbox
              node-key="catId"
              highlight-current
              check-strictly
              @check-change="handleClick"
              @node-click="nodeClick"/>
          </el-form-item>
          <el-form-item label="排序" prop="ranking">
            <el-input v-model="dialogBindData.ranking" size="small" type="text" placeholder="请输入顺序"/>
          </el-form-item>
          <el-form-item label="是否服务处" prop="isWebMallCat">
            <el-radio-group v-model="dialogBindData.isWebMallCat">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="移动商城显示" prop="isMobileMallCat">
            <el-radio-group v-model="dialogBindData.isMobileMallCat">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否显示" prop="isShow">
            <el-radio-group v-model="dialogBindData.isShow">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="dialogBindData.isWebMallCat === 0" label="是否积分" prop="isHotSelling">
            <el-radio-group v-model="dialogBindData.isHotSelling">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图标的类型" prop="iconType">
            <el-radio-group v-model="dialogBindData.iconType">
              <el-radio :label="0">无图标</el-radio>
              <el-radio :label="1">字体图标</el-radio>
              <el-radio :label="2">图片图标</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="dialogBindData.iconType === 2" label="图片" prop="iconPic" class="three">
            <uploadimg v-if="isRouterAlive" :dialog-type="dialogType" :img-logo-url="dialogBindData.iconPic" @emitSuccess="imgurlFun"/>
          </el-form-item>
          <el-form-item v-if="dialogBindData.iconType === 1" label="字体图标" prop="iconFont">
            <el-input v-model="dialogBindData.iconFont" size="small" type="text" placeholder="请输入字体图标"/>
          </el-form-item>
          <el-form-item label="搜索关键字" prop="searchKeyword">
            <el-input v-model="dialogBindData.searchKeyword" size="small" type="text" placeholder="请输入关键字"/>
          </el-form-item>
          <el-form-item label="语言" prop="language">
            <el-select v-model="dialogBindData.language" placeholder="请选择" size="small">
              <el-option :value="0" label="zh_CN"/>
            </el-select>
          </el-form-item>
          <el-form-item label="分类描述" prop="memo">
            <el-input v-model="dialogBindData.memo" autosize type="textarea" placeholder="分类描述"/>
          </el-form-item>
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import * as commodity from '../../api/commodity'
  import uploadimg from '../../components/UpLoadImg_b2b2c'
  export default {
    components:{uploadimg},
    data() {
      return {
        isRouterAlive:true,
        // 页面搜索
        seacherParam: {
          catName:''
        },
        searchShow:false,
        pageNo: 1,
        pageSize: 10,
        rowCount: null, // 总条数
        // 弹框
        dialogType: 1, // 1--增加  2--编辑  3--查看
        dialogState: false,
        // 按钮状态
        buttonState: false,
        // 列表数据
        dataOption: null,
        checkBox:false,
        datavalID:[],
        delBtn:true,
        // 删除分类集合
        delIdArr:null,
        // 提交内容
        dialogBindData: {
          catId:null,
          catName:'',
          ranking:'',
          isWebMallCat:1,
          isShow:1,
          isMobileMallCat:1,
          isHotSelling:0,
          iconType:0,
          searchKeyword:'',
          language:0,
          memo:'',
          iconFont:'',
          iconPic:''
        },
        rules:{
          catName:[
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ],
          ranking:[
            { required: true, message: '请输入排序', trigger: 'blur' },
          ]
        },
        // Three树
        filterText: '',
        i:0,
        threeData:null,
        threeCheckedData:[],
        defaultProps: {
          children: 'children',
          label: 'catName'
        }
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    computed: {
      dialogTitle() {
        if (this.dialogType === 1) {
          return '新增分类'
        }
        if (this.dialogType === 2) {
          return '编辑分类'
        } else {
          return '查看分类'
        }
      }
    },
    beforeMount() {
      this.getList();
    },
    created(){
      this.delclassList()
    },
    methods: {
      seachFun(){
        const param = {
          current: 1,
          size: this.pageSize,
          catName:this.seacherParam.catName
        }
        commodity.searchCategoryList(param).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records
        })
      },
      getList(cb) {
        const param = {
          current: this.pageNo,
          size: this.pageSize
        }
        commodity.getCategoryList(param).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始化three树
          this.threeData = res.data.data.records
          // 初始话表格数据
          this.dataOption = res.data.data.records
          // 初始化分页数据
          this.rowCount = res.data.data.total
          this.pageSize = res.data.data.size
        })
      },
      // 获取删除分类集合
      delclassList(){
        commodity.delCList().then(res => {
          this.delIdArr = res.data.data
        })
      },
      // 新增
      add() {
        this.dialogType = 1
        this.dialogState = true
        this.isRouterAlive = true
      },
      // 编辑
      edit(data) {
        this.dialogType = 2
        this.dialogState = true
        this.isRouterAlive = true
        if(data.parentId !== '0' && data.parentId !== null){
          this.threeCheckedData.push(data.parentId)
          console.log(this.threeCheckedData)
        }
        this.reBindData(data)
      },
      // 提交
      submmitFun() {
        const threeID = this.$refs.tree.getCheckedKeys()
        if(this.dialogBindData.isWebMallCat === 1){
          this.dialogBindData.isHotSelling = 0
        }
        const param = {
          catName:this.dialogBindData.catName,
          ranking:this.dialogBindData.ranking,
          isWebMallCat:this.dialogBindData.isWebMallCat,
          isShow:this.dialogBindData.isShow,
          isMobileMallCat:this.dialogBindData.isMobileMallCat,
          isHotSelling:this.dialogBindData.isHotSelling,
          iconType:this.dialogBindData.iconType,
          searchKeyword:this.dialogBindData.searchKeyword,
          language:this.dialogBindData.language,
          memo:this.dialogBindData.memo,
          iconFont:this.dialogBindData.iconFont
        }
        if(threeID.length === 0){
          param.parentId = 0
        }else{
          param.parentId = threeID.join(',')
        }
        if (this.dialogType !== 1) {
          param.catId = this.dialogBindData.catId
        }
        if(this.dialogBindData.iconType === 2){
          param.iconPic = this.dialogBindData.iconPic
        }
        this.$refs.dialogBindData.validate((valid) => {
          if (valid) {
            if (this.dialogType === 1) {
              commodity.addCategoryList(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.buttonState = false
                this.getList()
                this.handleClose()
              })
            } else {
              commodity.editorCategoryList(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.buttonState = false
                this.getList()
                this.handleClose()
              })
            }
          } else {
            return false
          }
        })
      },
      // 删除
      del(data) {
        if(this.datavalID.length === 0 && data === 0){
          this.$message({
            type: 'warning',
            message: '请选择商品'
          });
          return false
        }
        this.$confirm('确定要删除商品分类吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delList(data)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      delList(data){
        const classID= []
        if(data === 0){
          for(let val of this.datavalID){
            classID.push(val.catId)
          }
        }else {
          classID.push(data.catId)
        }
        commodity.delCategoryList(classID).then(res => {
          if (res.data.code === 1) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getList()
          }
        })
      },
      changeFun(data){
        this.datavalID = data
      },
      imgurlFun(data){
        this.dialogBindData.iconPic = data
      },
      // three树
      // 过滤搜索
      filterNode(value, data) {
        if (!value) return true;
        return data.catName.indexOf(value) !== -1;
      },
      // three单选
      handleClick(data, checked, node){
        if(checked == true){
          this.checkedId = data.catId;
          this.$refs.tree.setCheckedNodes([data])
        }
      },
      nodeClick(data,checked,node){
        this.checkedId = data.catId
        this.$refs.tree.setCheckedNodes([data])
      },
      // 反显
      reBindData(data) {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = data[key]
        }
      },
      // 重置
      resetFun() {
        this.$refs.seacherParam.resetFields()
        this.pageNo = 1
        this.pageSize = 10
        this.getList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNo = val
        this.getList()
      },
      handleClose() {
        for (const key in this.dialogBindData) {
          switch(key){
            case 'isWebMallCat':
              this.dialogBindData[key] = 1
              break
            case 'isMobileMallCat':
              this.dialogBindData[key] = 1
              break
            case 'isShow':
              this.dialogBindData[key] = 1
              break
            case 'isHotSelling':
              this.dialogBindData[key] = 0
              break
            case 'iconType':
              this.dialogBindData[key] = 0
              break
            default:
              this.dialogBindData[key] = ''
          }
        }
        this.threeCheckedData = []
        this.isRouterAlive = false
        this.$refs.tree.setCheckedKeys([])
        this.dialogState = false
        this.$refs.dialogBindData.clearValidate()
        console.log(this.threeCheckedData)
      },
      // 是否显示
      isShowVal(data){
        if(data === 0){
          return '不显示'
        }else if(data === 1){
          return '显示'
        }
      },
      // 是否积分
      isHotSellingVal(data){
        if(data === 0){
          return '否'
        }else if(data === 1){
          return '是'
        }
      },
      // 是否积分
      isWebMallCatVal(data){
        if(data === 0){
          return '否'
        }else if(data === 1){
          return '是'
        }
      },
      // 表格复选框隐藏
      cellcb(row){
        for(let val of this.delIdArr) {
          if (row.row.catId === val) {
            return "myCell"
          }
        }
      },
      // 删除匹配
      delID(data){
        for(let val of this.delIdArr) {
          if (data == val) {
            return true
          }
        }
      }
    }
  }
</script>
<style type="text/scss" lang="scss">
  .myCell .el-checkbox__input {
    display: none
  }
</style>
<style type="text/scss" lang="scss" scoped>

</style>
